<template>
  <div class="page-box">
    <div class="flex-left">
			<ShuJuTongJi />
			<left-bottom />
    </div>
    <div class="flex-right">
      <right-top />
      <DianWeiPaiMing />
    </div>
    
    <div class="postion_reletive">
      <el-select @change="selectStreet" placeholder="选择地点" v-model="street">
        <el-option
          :key="item.label"
          :label="item.label"
          :value="item.value"
          v-for="item in options"
        >  </el-option>
      </el-select>
      </div>
  </div>
</template>

<script>
import ShuJuTongJi from './components/ShuJuTongJi'
import LeftBottom from './components/LeftBottom'
import RightTop from './components/RightTop'
import DianWeiPaiMing from './components/DianWeiPaiMing'
import Bus from '@/untils/bus'

export default {
  components: {
    ShuJuTongJi,
    LeftBottom,
    RightTop,
    DianWeiPaiMing,
  },
  data() {
    return {
      options:[
        {
          label: '全部',
          value: 0,
        },
        {
          label: '交通路口',
          value: 1,
        },
        {
          label: '建筑工地',
          value: 2,
        },
        {
          label: '搅拌站',
          value: 3,
        },
      ],
      street: 0,
    }
  },
  methods: {
    selectStreet() {
      Bus.$emit('Dustmonitoring', this.street)
    }
  }
}
</script>
<style lang="less" scoped>
.leftbtn {
  background-color: #182236;
}
.postion_reletive {
  width: 250px;
  height: 100px;
  position: relative;
  left: 550px;
  top: 0px;
  /deep/ .el-input__inner {
    padding-left: 20px;
    width: 200px;
    height: 44px;
    background: rgba(4, 11, 32, 0.7);
    border: 1px solid #16d0ff;
    box-shadow: 0px 0px 19px 1px #173c90;
    border-radius: 8px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.7;
  }
  /deep/ .el-icon-arrow-up:before {
    content: '';
    background:url('../../assets/images/yingpanshidian/sanjiao.png') center center no-repeat;
    background-size: 10px 8px; 
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 80%;
    transform: translate(-80%,-50%) rotate(180deg)
  }
}
</style>
